<!--hooks编程  函数式编程-->
<script setup>
import { ref, computed, onMounted, onUpdated, onUnmounted } from 'vue'
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore = useNightModeStore();
// 面向对象编程
// export default{
//     data(){},
//     methods:{},
//     computed:{xx:function(){return xxx;}},//计算属性
//     created(){},Vue3里面setup里面的代码相当于是onMonuted();
//     mounted(){},Vue3里面是onMonuted();
// }
let date = ref(0);
let month = ref(0);
let hour = ref(0);
onMounted(() => {
    let dateO = new Date();
    month.value = dateO.getMonth();
    date.value = dateO.getDate();
    hour.value = dateO.getHours();
});

let chineseMonth = computed(() => {
    let chineseMonths = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
    return chineseMonths[month.value]
})

</script>
<template>
    <div :class="['tophead', nightModeStore.isNight ? 'night' : '']">
        <div class="left">
            <div class="date">
                <span>{{ date }}</span>
                <span>{{ chineseMonth }}月</span>
            </div>
            <div class="line"></div>
            <div v-if="hour > 5 && hour < 12" class="sayhello">上午好！</div>
            <div v-else-if="hour > 11 && hour <= 18" class="sayhello">下午好！</div>
            <div v-else class="sayhello">晚上好！</div>
        </div>
        <div class="headimg">
            <RouterLink to="/userset">
                <img src="../assets/oyb.png" />
            </RouterLink>
        </div>
    </div>
</template>

<style scoped>
.tophead {
    background-color: #61d7a4;
    /* #eee */
    display: flex;
    text-align: center;
    padding: 6px 30px 6px 0px;
    justify-content: space-between;

}

.tophead.night {
    background-color: #666;
    color: #fff;
}

.left {
    display: flex;
}

.date {
    padding: 0px 30px;
}

.line {
    border-left: 1px solid #ddd;
    height: 30px;
    padding-right: 20px;
}

.date span {
    text-align: center;
    display: block;
}

.date span:first-child {
    font-size: 16px;
    font-weight: bold;
}

.date span:last-child {
    font-size: 14px;
}

.sayhello {
    line-height: 40px;
    font-weight: bold;
    font-size: 20px;
}

.headimg {
    width: 40px;
    height: 40px;
    background-color: #fff;
    float: right;
    border-radius: 50%;
}

.headimg img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
</style>